<template>
  <div class="finance">
    <tab v-model="cur">
      <tab-item :key="index" v-for="(item,index) in tabList">{{item}}</tab-item>
    </tab>
    <swiper :threshold="80" :min-moving-distance="30" class="swiper" height="100%" v-model="cur" :show-dots="false">
      <swiper-item>
        <div class="tab-swiper vux-center"><statics/></div>
      </swiper-item>
      <swiper-item>
        <div class="tab-swiper vux-center"><trend/></div>
      </swiper-item>
      <swiper-item>
        <div class="tab-swiper vux-center"><Settlement/></div>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import Statics from "./Statics";
import Trend from "./Trend";
import Settlement from "./Settlement";
import { Tab, TabItem, Swiper, SwiperItem } from "vux";
export default {
  name: "finance",
  data() {
    return {
      tabList: ["统计", "趋势", "结算"],
      cur: 0
    };
  },
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Statics,
    Trend,
    Settlement
  }
};
</script>
<style scoped>
.swiper {
  height: auto;
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>